<template>
  <Layout @loaded="handleLayoutLoaded">
    <div class="accounts-container">
      <!-- 账户总览区域 -->
      <el-card class="overview-card">
        <template #header>
          <div class="card-header">
            <h3>账户总览</h3>
            <div class="refresh-section">
              <span class="update-time">更新时间: {{ formatTime(lastUpdateTime) }}</span>
              <el-button :icon="Refresh" circle size="small" @click="refreshData"
                         :loading="loading"></el-button>
            </div>
          </div>
        </template>

        <div class="account-overview">
          <div class="balance-section">
            <div class="total-balance">
              <div class="balance-label">总资产 (元)</div>
              <div class="balance-value">{{ formatAmount(balanceInfo.balance) }}</div>
            </div>
            <div class="balance-details">
              <div class="detail-item">
                <div class="detail-label">可用余额</div>
                <div class="detail-value">{{ formatAmount(calculateAvailableBalance()) }}</div>
              </div>
              <div class="detail-item">
                <div class="detail-label">冻结金额</div>
                <div class="detail-value">{{ formatAmount(balanceInfo.frozenAmount) }}</div>
              </div>
            </div>
            <div class="balance-actions">
              <el-button type="primary" @click="showRechargeDialog">充值</el-button>
              <el-button type="success" @click="showWithdrawDialog">提现</el-button>
              <el-button type="warning" @click="showTransferDialog">转账</el-button>
            </div>
          </div>
          <div class="balance-chart">
            <div class="chart-wrapper" ref="balanceChartRef"></div>
          </div>
        </div>
      </el-card>

      <!-- 银行卡管理区域 -->
      <el-card class="bank-card-section">
        <template #header>
          <div class="card-header">
            <h3>银行卡管理</h3>
            <el-button type="primary" plain @click="showAddCardDialog">
              <el-icon>
                <Plus/>
              </el-icon>
              添加银行卡
            </el-button>
          </div>
        </template>

        <div class="card-list-container">
          <el-empty v-if="bankCards.length === 0" description="暂无银行卡，请添加" :image-size="100"></el-empty>

          <div v-else class="bank-cards-list">
            <div
                v-for="card in bankCards"
            :key="card.id"
            class="bank-card-item"
            :class="[getBankClass(card.bankName), {'default-card': card.isDefault === 1}]"
            @click="showCardDetail(card)"
            >
            <div class="card-bank-info">
              <img :src="getBankLogo(card.bankName)" alt="Bank Logo" class="bank-logo">
              <span class="bank-name">{{ card.bankName }}</span>
              <el-tag v-if="card.isDefault
              === 1" size="small" type="success">默认</el-tag>
              <el-tag v-else size="small" type="info">普通</el-tag>
            </div>

            <div class="card-number">{{ formatCardNumber(card.cardNumber) }}</div>

            <div class="card-holder">
              <span>持卡人: {{ card.cardholderName }}</span>
              <el-tag size="small" :type="card.cardType === 1 ? 'primary' : 'warning'">
              {{ card.cardType === 1 ? '储蓄卡' : '信用卡' }}
              </el-tag>
            </div>

            <div class="card-actions">
              <el-button
                  v-if="card.isDefault !== 1"
              type="text"
              @click.stop="setDefaultCard(card.id)"
              >设为默认</el-button>
              <el-popconfirm
                  title="确定要删除此银行卡吗？"
                  @confirm="deleteCard(card.id)"
              >
                <template #reference>
                  <el-button type="text" class="delete-btn" @click.stop>删除</el-button>
                </template>
              </el-popconfirm>
            </div>
          </div>
        </div>
    </div>
    </el-card>

    <!-- 交易记录区域 -->
    <el-card class="transactions-section">
      <template #header>
        <div class="card-header">
          <h3>交易记录</h3>
          <div class="transaction-filters">
            <el-select v-model="transactionFilter.type" placeholder="交易类型" clearable>
              <el-option label="全部" value=""></el-option>
              <el-option label="充值" :value="1"></el-option>
              <el-option label="提现" :value="2"></el-option>
              <el-option label="转账" :value="3"></el-option>
              <el-option label="支付" :value="4"></el-option>
              <el-option label="退款" :value="5"></el-option>
            </el-select>

            <el-date-picker
                v-model="transactionFilter.dateRange"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                format="YYYY-MM-DD"
                style="min-width: 380px;"
            ></el-date-picker>

            <el-button type="primary" plain @click="loadTransactions">
              <el-icon>
                <Search/>
              </el-icon>
              查询
            </el-button>
          </div>
        </div>
      </template>

      <el-table
          :data="transactions"
          border
          stripe
          style="width: 100%"
      v-loading="transactionsLoading"
      @row-click="showTransactionDetail"
      >
      <el-table-column prop="tradeNo" label="交易流水号" width="180"></el-table-column>
      <el-table-column prop="tradeTypeName" label="交易类型" width="100">
        <template #default="scope">
          <el-tag :type="getTradeTypeTagType(scope.row.tradeType)">
            {{ scope.row.tradeTypeName }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="amount" label="金额" width="120">
        <template #default="scope">
          <span :class="{'income': isIncome(scope.row), 'expense': !isIncome(scope.row)}">
          {{ isIncome(scope.row) ? '+' : '-' }} {{ formatAmount(scope.row.amount) }}
          </span>
        </template>
      </el-table-column>
      <el-table-column prop="statusName" label="状态" width="100">
        <template #default="scope">
          <el-tag :type="getStatusTagType(scope.row.status)">
            {{ scope.row.statusName }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="channelName" label="渠道" width="100"></el-table-column>
      <el-table-column prop="createTime" label="交易时间" width="180">
        <template #default="scope">
          {{ formatDateTime(scope.row.createTime) }}
        </template>
      </el-table-column>
      <el-table-column prop="remark" label="备注"></el-table-column>
      </el-table>

      <div class="pagination-container">
        <el-pagination
            v-model:current-page="currentPage"
            v-model:page-size="pageSize"
            :page-sizes="[10, 20, 50, 100]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalTransactions"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        ></el-pagination>
      </div>
    </el-card>
    </div>

    <!-- 充值对话框 -->
    <el-dialog v-model="rechargeDialogVisible" title="账户充值" width="500px">
      <el-form :model="rechargeForm" :rules="rechargeRules" ref="rechargeFormRef" label-width="100px">
        <el-form-item label="充值金额" prop="amount">
          <el-input-number v-model="rechargeForm.amount" :min="0.01" :step="100" :precision="2"
                           placeholder="请输入充值金额"></el-input-number>
        </el-form-item>
        <el-form-item label="支付方式" prop="channel">
          <el-select v-model="rechargeForm.channel" placeholder="请选择支付方式">
            <el-option label="支付宝" value="ALIPAY"></el-option>
            <el-option label="微信支付" value="WECHAT"></el-option>
            <el-option label="银行卡" value="BANK_CARD"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="rechargeDialogVisible
          = false">取消</el-button>
          <el-button type="primary" @click="handleRecharge" :loading="submitLoading">确认充值</el-button>
        </div>
      </template>
    </el-dialog>
    
    <!-- 银行卡详情对话框 -->
    <el-dialog v-model="cardDetailVisible" title="银行卡详情" width="500px" :close-on-click-modal="false" center>
      <div v-if="currentCard" class="card-detail-content">
        <!-- 银行卡顶部展示 -->
      <div class="card-preview" :class="[getBankClass(currentCard.bankName), {'default-card': currentCard.isDefault === 1}]">
      <div class="preview-header">
        <img :src="getBankLogo(currentCard.bankName)" alt="Bank Logo" class="bank-logo-large">
        <span class="bank-name-large">{{ currentCard.bankName }}</span>
        <el-tag v-if="currentCard.isDefault === 1" size="small" type="success" class="card-tag">默认</el-tag>
          <el-tag v-else size="small" type="info" class="card-tag">普通</el-tag>
        </div>
        <div class="card-number-preview">{{ formatCardNumber(currentCard.cardNumber) }}</div>
        <div class="card-holder-preview">持卡人: {{ currentCard.cardholderName }}</div>
      </div>
      
      <!-- 银行卡详细信息 -->
      <div class="card-detail-body">
      <div class="card-detail-grid">
        <div class="detail-grid-item">
        <div class="detail-label">持卡人</div>
        <div class="detail-value">{{ currentCard.cardholderName }}</div>
        </div>
        <div class="detail-grid-item">
        <div class="detail-label">卡类型</div>
        <div class="detail-value">{{ currentCard.cardType === 1 ? '储蓄卡' : '信用卡' }}</div>
        </div>
        <div class="detail-grid-item">
        <div class="detail-label">手机号</div>
        <div class="detail-value">{{ maskPhoneNumber(currentCard.bindPhone) }}</div>
        </div>
        <div class="detail-grid-item">
        <div class="detail-label">失效日期</div>
        <div class="detail-value">{{ formatDate(currentCard.expireDate) }}</div>
        </div>
        <div class="detail-grid-item" v-if="currentCard.cardType === 2">
        <div class="detail-label">安全码</div>
        <div class="detail-value">***</div>
        </div>
          <div class="detail-grid-item">
              <div class="detail-label">添加时间</div>
              <div class="detail-value">{{ formatDateTime(currentCard.createTime) }}</div>
            </div>
          <div class="detail-grid-item" v-if="currentCard.cardNumber">
            <div class="detail-label">卡号</div>
          <div class="detail-value card-number-full">{{ currentCard.cardNumber }}</div>
      </div>
      </div>
      </div>
      
          <div class="card-detail-actions">
            <el-button v-if="currentCard.isDefault !== 1" type="primary" @click="setDefaultCard(currentCard.id)">设为默认</el-button>
            <el-popconfirm title="确定要删除此银行卡吗？" @confirm="deleteCard(currentCard.id)">
              <template #reference>
                <el-button type="danger">删除银行卡</el-button>
              </template>
            </el-popconfirm>
          </div>
        </div>
    </el-dialog>

    <!-- 提现对话框 -->
    <el-dialog v-model="withdrawDialogVisible" title="账户提现" width="500px">
      <el-form :model="withdrawForm" :rules="withdrawRules" ref="withdrawFormRef" label-width="100px">
        <el-form-item label="提现金额" prop="amount">
          <el-input-number
              v-model="withdrawForm.amount"
              :min="0.01"
              :max="calculateAvailableBalance()"
              :step="100"
              :precision="2"
              placeholder="请输入提现金额"
          ></el-input-number>
        </el-form-item>
        <el-form-item label="提现到" prop="bankCardId">
          <el-select v-model="withdrawForm.bankCardId" placeholder="请选择银行卡">
            <el-option
                v-for="card in bankCards"
            :key="card.id"
            :label="`${card.bankName} (${formatCardNumber(card.cardNumber)})`"
            :value="card.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="支付密码" prop="password">
          <el-input v-model="withdrawForm.password" show-password placeholder="请输入支付密码"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="withdrawDialogVisible
          = false">取消</el-button>
          <el-button type="primary" @click="handleWithdraw" :loading="submitLoading">确认提现</el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 转账对话框 -->
    <el-dialog v-model="transferDialogVisible" title="转账" width="500px">
      <el-form :model="transferForm" :rules="transferRules" ref="transferFormRef" label-width="100px">
        <el-form-item label="收款账号" prop="targetAccount">
          <el-input v-model="transferForm.targetAccount" placeholder="请输入收款人账号"></el-input>
        </el-form-item>
        <el-form-item label="转账金额" prop="amount">
          <el-input-number
              v-model="transferForm.amount"
              :min="0.01"
              :max="calculateAvailableBalance()"
              :step="100"
              :precision="2"
              placeholder="请输入转账金额"
          ></el-input-number>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="transferForm.remark" placeholder="请输入转账备注"></el-input>
        </el-form-item>
        <el-form-item label="支付密码" prop="password">
          <el-input v-model="transferForm.password" show-password placeholder="请输入支付密码"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="transferDialogVisible
          = false">取消</el-button>
          <el-button type="primary" @click="handleTransfer" :loading="submitLoading">确认转账</el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 添加银行卡对话框 -->
    <el-dialog v-model="addCardDialogVisible" title="添加银行卡" width="500px">
      <el-form :model="cardForm" :rules="cardRules" ref="cardFormRef" label-width="100px">
        <el-form-item label="银行名称" prop="bankName">
          <el-select v-model="cardForm.bankName" placeholder="请选择银行">
            <el-option label="工商银行" value="工商银行"></el-option>
            <el-option label="农业银行" value="农业银行"></el-option>
            <el-option label="中国银行" value="中国银行"></el-option>
            <el-option label="建设银行" value="建设银行"></el-option>
            <el-option label="招商银行" value="招商银行"></el-option>
            <el-option label="交通银行" value="交通银行"></el-option>
            <el-option label="浦发银行" value="浦发银行"></el-option>
            <el-option label="民生银行" value="民生银行"></el-option>
            <el-option label="中信银行" value="中信银行"></el-option>
            <el-option label="兴业银行" value="兴业银行"></el-option>
            <el-option label="光大银行" value="光大银行"></el-option>
            <el-option label="平安银行" value="平安银行"></el-option>
            <el-option label="邮储银行" value="邮储银行"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="卡号" prop="cardNumber">
          <el-input v-model="cardForm.cardNumber" placeholder="请输入银行卡号"></el-input>
        </el-form-item>
        <el-form-item label="持卡人" prop="cardHolder">
          <el-input v-model="cardForm.cardHolder" placeholder="请输入持卡人姓名"></el-input>
        </el-form-item>
        <el-form-item label="卡类型" prop="cardType">
          <el-radio-group v-model="cardForm.cardType">
            <el-radio :label="1">储蓄卡</el-radio>
            <el-radio :label="2">信用卡</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="手机号" prop="phoneNumber">
          <el-input v-model="cardForm.phoneNumber" placeholder="请输入银行预留手机号"></el-input>
        </el-form-item>
        <el-form-item label="失效日期" prop="expireDate">
          <el-date-picker
              v-model="cardForm.expireDate"
              type="date"
              placeholder="请选择失效日期"
              format="YYYY-MM-DD"
              value-format="YYYY-MM-DD"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="安全码" prop="cvv" v-if="cardForm.cardType === 2">
        <el-input v-model="cardForm.cvv" placeholder="请输入信用卡背面的3位安全码"></el-input>
        </el-form-item>
        <el-form-item label="默认卡" prop="isDefault">
          <el-switch v-model="cardForm.isDefault" :active-value="1" :inactive-value="0"></el-switch>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="addCardDialogVisible
          = false">取消</el-button>
          <el-button type="primary" @click="handleAddCard" :loading="submitLoading">添加</el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 交易详情对话框 -->
    <el-dialog v-model="transactionDetailVisible" title="交易详情" width="500px">
      <div v-if="currentTransaction" class="transaction-detail">
        <div class="transaction-header">
          <el-tag :type="getTradeTypeTagType(currentTransaction.tradeType)" class="transaction-type">
            {{ currentTransaction.tradeTypeName }}
          </el-tag>
          <div class="transaction-amount" :class="{'income': isIncome(currentTransaction),
          'expense': !isIncome(currentTransaction)}">
          {{ isIncome(currentTransaction) ? '+' : '-' }} {{ formatAmount(currentTransaction.amount) }}
        </div>
      </div>

      <el-divider></el-divider>

      <div class="detail-item">
        <span class="detail-label">交易流水号</span>
        <span class="detail-value">{{ currentTransaction.tradeNo }}</span>
      </div>
      <div class="detail-item">
        <span class="detail-label">交易状态</span>
        <el-tag :type="getStatusTagType(currentTransaction.status)">{{ currentTransaction.statusName }}</el-tag>
      </div>
      <div class="detail-item">
        <span class="detail-label">交易时间</span>
        <span class="detail-value">{{ formatDateTime(currentTransaction.createTime) }}</span>
      </div>
      <div class="detail-item">
        <span class="detail-label">交易渠道</span>
        <span class="detail-value">{{ currentTransaction.channelName }}</span>
      </div>
      <div class="detail-item" v-if="currentTransaction.targetAccount">
        <span class="detail-label">目标账户</span>
        <span class="detail-value">{{ currentTransaction.targetAccount }}</span>
      </div>
      <div class="detail-item">
        <span class="detail-label">交易后余额</span>
        <span class="detail-value">{{ formatAmount(currentTransaction.balance) }}</span>
      </div>
      <div class="detail-item" v-if="currentTransaction.remark">
        <span class="detail-label">备注</span>
        <span class="detail-value">{{ currentTransaction.remark }}</span>
      </div>
      </div>
    </el-dialog>
  </Layout>
</template>

<script setup>
console.log('Accounts component initialized');
// The rest of the code remains the same
import {ref, reactive, onUnmounted, nextTick} from 'vue';
import {ElMessage, ElMessageBox} from 'element-plus';
import { usePageLifecycle } from '@/composables/usePageLifecycle';
import {Plus, Search, Refresh} from '@element-plus/icons-vue';
import {v4 as uuidv4} from 'uuid';
import Layout from '@/components/layout/Layout.vue';
import * as echarts from 'echarts/core';
import {PieChart} from 'echarts/charts';
import {
  TitleComponent, TooltipComponent, LegendComponent,
  GridComponent
} from 'echarts/components';
import {CanvasRenderer} from 'echarts/renderers';

import {
  getAccountBalance,
  rechargeAccount,
  withdrawAccount,
  transferAccount,
  getBankCardList,
  getBankCardDetail,
  addBankCard,
  setDefaultBankCard,
  deleteBankCard,
  getTransactionList
} from '@/api/account';

// 注册 ECharts 组件
echarts.use([
  PieChart,
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  GridComponent,
  CanvasRenderer
]);

// 账户余额数据
const balanceInfo = reactive({
  balance: 0,
  frozenAmount: 0
});

// 加载状态
const loading = ref(false);
const submitLoading = ref(false);
const transactionsLoading = ref(false);
const lastUpdateTime = ref(new Date());

// 银行卡列表
const bankCards = ref([]);

// 交易记录
const transactions = ref([]);
const currentPage = ref(1);
const pageSize = ref(10);
const totalTransactions = ref(0);
const transactionFilter = reactive({
  type: '',
  dateRange: []
});

// 当前选中的银行卡
const currentCard = ref(null);
const cardDetailVisible = ref(false);

// 当前选中的交易详情
const currentTransaction = ref(null);
const transactionDetailVisible = ref(false);

// 图表实例
const balanceChartRef = ref(null);
let balanceChart = null;

// 对话框可见性
const rechargeDialogVisible = ref(false);
const withdrawDialogVisible = ref(false);
const transferDialogVisible = ref(false);
const addCardDialogVisible = ref(false);

// 表单数据
const rechargeForm = reactive({
  amount: 0,
  channel: '',
  uniqueToken: ''
});

const withdrawForm = reactive({
  amount: 0,
  bankCardId: '',
  password: ''
});

const transferForm = reactive({
  targetAccount: '',
  amount: 0,
  remark: '',
  password: ''
});

// 表单数据
const cardForm = reactive({
  bankName: '',
  cardNumber: '',
  cardHolder: '',  // 前端使用cardHolder而非cardholderName
  cardType: 1,
  phoneNumber: '', // 前端使用phoneNumber而非bindPhone
  expireDate: '',
  cvv: '',
  isDefault: 0
});

// 表单引用
const rechargeFormRef = ref(null);
const withdrawFormRef = ref(null);
const transferFormRef = ref(null);
const cardFormRef = ref(null);

// 表单验证规则
const rechargeRules = {
  amount: [
    {required: true, message: '请输入充值金额', trigger: 'blur'},
    {type: 'number', min: 0.01, message: '充值金额必须大于0', trigger: 'blur'}
  ],
  channel: [
    {required: true, message: '请选择支付方式', trigger: 'change'}
  ]
};

const withdrawRules = {
  amount: [
    {required: true, message: '请输入提现金额', trigger: 'blur'},
    {type: 'number', min: 0.01, message: '提现金额必须大于0', trigger: 'blur'}
  ],
  bankCardId: [
    {required: true, message: '请选择银行卡', trigger: 'change'}
  ],
  password: [
    {required: true, message: '请输入支付密码', trigger: 'blur'},
    {min: 6, message: '支付密码长度不能小于6位', trigger: 'blur'}
  ]
};

const transferRules = {
  targetAccount: [
    {required: true, message: '请输入收款账号', trigger: 'blur'}
  ],
  amount: [
    {required: true, message: '请输入转账金额', trigger: 'blur'},
    {type: 'number', min: 0.01, message: '转账金额必须大于0', trigger: 'blur'}
  ],
  password: [
    {required: true, message: '请输入支付密码', trigger: 'blur'},
    {min: 6, message: '支付密码长度不能小于6位', trigger: 'blur'}
  ]
};

// 银行卡表单验证规则
const cardRules = {
  bankName: [
    {required: true, message: '请选择银行', trigger: 'change'}
  ],
  cardNumber: [
    {required: true, message: '请输入银行卡号', trigger: 'blur'},
    {pattern: /^\\d{16,19}$/, message: '银行卡号格式不正确', trigger: 'blur'}
  ],
  cardHolder: [
    {required: true, message: '请输入持卡人姓名', trigger: 'blur'}
  ],
  cardType: [
    {required: true, message: '请选择卡类型', trigger: 'change'}
  ],
  phoneNumber: [
    {required: true, message: '请输入手机号', trigger: 'blur'},
    {pattern: /^1[3-9]\\d{9}$/, message: '手机号格式不正确', trigger: 'blur'}
  ],
  expireDate: [
    {required: true, message: '请选择失效日期', trigger: 'change'}
  ],
  cvv: [
    {pattern: /^\\d{3,4}$/, message: '安全码格式不正确', trigger: 'blur'}
  ]
};

// 初始化页面数据
const initializePageData = async () => {
  console.log('Initializing accounts page data...');
  try {
    await Promise.all([
      fetchAccountBalance(),
      fetchBankCards(),
      loadTransactions()
    ]);

    // 初始化余额图表
    nextTick(() => {
      initBalanceChart();
    });
    
    // 添加窗口大小变化监听（只添加一次）
    if (!window.accountsResizeListenerAdded) {
      window.addEventListener('resize', handleResize);
      window.accountsResizeListenerAdded = true;
    }
  } catch (error) {
    console.error('Error initializing account data:', error);
    ElMessage.error('加载账户数据失败，请刷新重试');
  }
};

// 使用页面生命周期 composable
const { safeLoadData } = usePageLifecycle(initializePageData, {
  autoLoad: true,
  reloadOnRouteChange: true,
  delay: 50
});

// 在组件卸载时移除监听
onUnmounted(() => {
  window.removeEventListener('resize', handleResize);

  // 销毁图表实例
  if (balanceChart) {
    balanceChart.dispose();
    balanceChart = null;
  }
});

// 获取账户余额
const fetchAccountBalance = async () => {
  loading.value = true;
  try {
    const response = await getAccountBalance();
    if (response.code === 0) {
      balanceInfo.balance = response.data.balance || 0;
      balanceInfo.frozenAmount = response.data.frozenAmount || 0;
      lastUpdateTime.value = new Date();

      // 更新图表
      if (balanceChart) {
        updateBalanceChart();
      }
    }
  } catch (error) {
    console.error('获取账户余额失败:', error);
    ElMessage.error('获取账户余额失败，请刷新重试');
  } finally {
    loading.value = false;
  }
};

// 获取银行卡列表
const fetchBankCards = async () => {
  try {
    const response = await getBankCardList();
    if (response.code === 0) {
      bankCards.value = response.data || [];
    }
  } catch (error) {
    console.error('获取银行卡列表失败:', error);
    ElMessage.error('获取银行卡列表失败，请刷新重试');
  }
};

// 加载交易记录
const loadTransactions = async () => {
  transactionsLoading.value = true;

  try {
    // 构建参数
    const params = {
      pageNum: currentPage.value,
      pageSize: pageSize.value
    };

    // 添加交易类型过滤
    if (transactionFilter.type) {
      params.tradeType = transactionFilter.type;
    }

    // 添加日期范围过滤
    if (transactionFilter.dateRange && transactionFilter.dateRange.length === 2) {
      params.startTime = transactionFilter.dateRange[0].format('YYYY-MM-DD HH:mm:ss');
      params.endTime = transactionFilter.dateRange[1].format('YYYY-MM-DD HH:mm:ss');
    }

    const response = await getTransactionList(params);
    if (response.code === 0) {
      transactions.value = response.data || [];
      totalTransactions.value = response.total || 0;
    }
  } catch (error) {
    console.error('获取交易记录失败:', error);
    ElMessage.error('获取交易记录失败，请刷新重试');
  } finally {
    transactionsLoading.value = false;
  }
};

// 刷新数据
const refreshData = async () => {
  console.log('Refreshing account data...');
  
  // 使用 safeLoadData 来重新加载数据
  await safeLoadData();
  
  console.log('Account data refreshed successfully');
  ElMessage.success('数据已刷新');
};

// 计算可用余额
const calculateAvailableBalance = () => {
  return Math.max(0, (balanceInfo.balance || 0) - (balanceInfo.frozenAmount || 0));
};

// 格式化货币金额
const formatAmount = (amount) => {
  if (amount === undefined || amount === null) return '0.00';
  return parseFloat(amount).toFixed(2).replace(/\\B(?=(\\d{3})+(?!\\d))/g, ',');
};

// 格式化时间
const formatTime = (dateTime) => {
  if (!dateTime) return '暂无数据';

  const date = new Date(dateTime);
  const hours = String(date.getHours()).padStart(2, '0');
  const minutes = String(date.getMinutes()).padStart(2, '0');
  const seconds = String(date.getSeconds()).padStart(2, '0');

  return `${hours}:${minutes}:${seconds}`;
};

// 格式化日期时间
const formatDateTime = (dateTime) => {
  if (!dateTime) return '暂无数据';

  const date = new Date(dateTime);
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, '0');
  const day = String(date.getDate()).padStart(2, '0');
  const hours = String(date.getHours()).padStart(2, '0');
  const minutes = String(date.getMinutes()).padStart(2, '0');
  const seconds = String(date.getSeconds()).padStart(2, '0');

  return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
};

// 格式化银行卡号
const formatCardNumber = (cardNumber) => {
  if (!cardNumber) return '';

  // 将卡号格式化为 **** **** **** 1234 格式
  const lastFour = cardNumber.slice(-4);
  return `**** **** **** ${lastFour}`;
};

// 获取银行标识CSS类
const getBankClass = (bankName) => {
  if (!bankName) return '';

  const bankMap = {
    '工商银行': 'icbc-card',
    '农业银行': 'abc-card',
    '中国银行': 'boc-card',
    '建设银行': 'ccb-card',
    '招商银行': 'cmb-card',
    '交通银行': 'bocom-card',
    '浦发银行': 'spdb-card',
    '民生银行': 'cmbc-card',
    '中信银行': 'citic-card',
    '兴业银行': 'cib-card',
    '光大银行': 'ceb-card',
    '平安银行': 'pab-card',
    '邮储银行': 'psbc-card'
  };

  return bankMap[bankName] || 'default-bank-card';
};

// 获取银行LOGO
const getBankLogo = (bankName) => {
  // 在实际项目中，这里应该返回银行logo的URL
  // 这里简化处理，返回一个通用图标
  console.log('bankName', bankName);
  return 'https://img.icons8.com/color/48/000000/bank-building.png';
};

// 初始化余额图表
const initBalanceChart = () => {
  if (!balanceChartRef.value) return;

  balanceChart = echarts.init(balanceChartRef.value);
  updateBalanceChart();
  
  // 在首次渲染后触发resize事件，确保内容正确显示
  setTimeout(() => {
    if (balanceChart) {
      balanceChart.resize();
    }
  }, 200);
};

// 更新余额图表
const updateBalanceChart = () => {
  if (!balanceChart) return;

  // 准备数据，如果冻结金额为0，则不显示冻结金额
  const chartData = [];
  
  // 始终添加可用余额
  chartData.push({
    value: calculateAvailableBalance(),
    name: '可用余额',
    itemStyle: {
      color: '#67C23A'
    }
  });
  
  // 仅当冻结金额大于0时才显示冻结金额
  if ((balanceInfo.frozenAmount || 0) > 0) {
    chartData.push({
      value: balanceInfo.frozenAmount,
      name: '冻结金额',
      itemStyle: {
        color: '#E6A23C'
      }
    });
  }
  
  // 根据数据准备图例项
  const legendData = chartData.map(item => item.name);

  const option = {
    tooltip: {
      trigger: 'item',
      formatter: '{b}: {c} ({d}%)',
      show: true,
      alwaysShowContent: true  // 始终显示提示框，不仅在鼠标悬浮时
    },
    legend: {
      orient: 'vertical',
      right: 10,
      top: 'center',
      data: legendData
    },
    series: [
      {
        name: '账户资产',
        type: 'pie',
        radius: ['50%', '70%'],
        avoidLabelOverlap: false,
        label: {
          show: true,  // 始终显示标签
          position: 'inside',
          formatter: '{b}: {c} ({d}%)'  // 显示名称、值和百分比
        },
        emphasis: {
          label: {
            show: true,
            fontSize: '18',
            fontWeight: 'bold'
          }
        },
        labelLine: {
          show: true  // 显示引导线
        },
        data: chartData
      }
    ]
  };

  balanceChart.setOption(option);
};

// 处理窗口大小变化
const handleResize = () => {
  if (balanceChart) {
    balanceChart.resize();
  }
};

// 处理布局组件加载完成事件
const handleLayoutLoaded = () => {
  // 手动刷新数据
  refreshData();
};

// 显示充值对话框
const showRechargeDialog = () => {
  // 重置表单
  rechargeForm.amount = 0;
  rechargeForm.channel = '';
  rechargeForm.uniqueToken = uuidv4(); // 生成唯一标识

  // 显示对话框
  rechargeDialogVisible.value = true;
};

// 显示提现对话框
const showWithdrawDialog = () => {
  // 检查是否有绑定的银行卡
  if (bankCards.value.length === 0) {
    ElMessageBox.confirm(
        '您还没有绑定银行卡，是否立即添加？',
        '提示',
        {
          confirmButtonText: '立即添加',
          cancelButtonText: '取消',
          type: 'warning'
        }
    ).then(() => {
      showAddCardDialog();
    }).catch(() => {
    });
    return;
  }

  // 重置表单
  withdrawForm.amount = 0;
  withdrawForm.bankCardId = '';
  withdrawForm.password = '';

  // 如果有默认银行卡，自动选择
  const defaultCard = bankCards.value.find(card => card.isDefault === 1);
  if (defaultCard) {
    withdrawForm.bankCardId = defaultCard.id;
  }

  // 显示对话框
  withdrawDialogVisible.value = true;
};

// 显示转账对话框
const showTransferDialog = () => {
  // 重置表单
  transferForm.targetAccount = '';
  transferForm.amount = 0;
  transferForm.remark = '';
  transferForm.password = '';

  // 显示对话框
  transferDialogVisible.value = true;
};

// 显示添加银行卡对话框
const showAddCardDialog = () => {
  // 重置表单
  cardForm.bankName = '';
  cardForm.cardNumber = '';
  cardForm.cardHolder = '';
  cardForm.cardType = 1;
  cardForm.phoneNumber = '';
  cardForm.expireDate = '';
  cardForm.cvv = '';
  cardForm.isDefault = bankCards.value.length === 0 ? 1 : 0; // 如果没有银行卡，默认设为默认卡

  // 显示对话框
  addCardDialogVisible.value = true;
};

// 处理充值
const handleRecharge = async () => {
  if (!rechargeFormRef.value) return;

  await rechargeFormRef.value.validate(async (valid) => {
    if (valid) {
      submitLoading.value = true;

      try {
        const response = await rechargeAccount({
          amount: rechargeForm.amount,
          channel: rechargeForm.channel,
          uniqueToken: rechargeForm.uniqueToken
        });

        if (response.code === 0) {
          ElMessage.success('充值申请已提交，请等待处理');
          rechargeDialogVisible.value = false;

          // 刷新数据
          refreshData();
        }
      } catch (error) {
        console.error('充值失败:', error);
        ElMessage.error('充值失败，请重试');
      } finally {
        submitLoading.value = false;
      }
    }
  });
};

// 处理提现
const handleWithdraw = async () => {
  if (!withdrawFormRef.value) return;

  await withdrawFormRef.value.validate(async (valid) => {
    if (valid) {
      submitLoading.value = true;

      try {
        const response = await withdrawAccount({
          amount: withdrawForm.amount,
          bankCardId: withdrawForm.bankCardId,
          password: withdrawForm.password
        });

        if (response.code === 0) {
          ElMessage.success('提现申请已提交，请等待处理');
          withdrawDialogVisible.value = false;

          // 刷新数据
          refreshData();
        }
      } catch (error) {
        console.error('提现失败:', error);
        ElMessage.error('提现失败，请重试');
      } finally {
        submitLoading.value = false;
      }
    }
  });
};

// 处理转账
const handleTransfer = async () => {
  if (!transferFormRef.value) return;

  await transferFormRef.value.validate(async (valid) => {
    if (valid) {
      submitLoading.value = true;

      try {
        const response = await transferAccount({
          targetAccount: transferForm.targetAccount,
          amount: transferForm.amount,
          remark: transferForm.remark,
          password: transferForm.password
        });

        if (response.code === 0) {
          ElMessage.success('转账成功');
          transferDialogVisible.value = false;

          // 刷新数据
          refreshData();
        }
      } catch (error) {
        console.error('转账失败:', error);
        ElMessage.error('转账失败，请重试');
      } finally {
        submitLoading.value = false;
      }
    }
  });
};

// 处理添加银行卡
const handleAddCard = async () => {
  if (!cardFormRef.value) return;

  await cardFormRef.value.validate(async (valid) => {
    if (valid) {
      submitLoading.value = true;

      try {
        const response = await addBankCard({
          bankName: cardForm.bankName,
          cardNumber: cardForm.cardNumber,
          cardHolder: cardForm.cardHolder,
          cardType: cardForm.cardType,
          phoneNumber: cardForm.phoneNumber,
          expireDate: cardForm.expireDate,
          cvv: cardForm.cvv,
          isDefault: cardForm.isDefault
        });

        if (response.code === 0) {
          ElMessage.success('银行卡添加成功');
          addCardDialogVisible.value = false;

          // 刷新银行卡列表
          fetchBankCards();
        }
      } catch (error) {
        console.error('添加银行卡失败:', error);
        ElMessage.error('添加银行卡失败，请重试');
      } finally {
        submitLoading.value = false;
      }
    }
  });
};

// 设置默认银行卡
const setDefaultCard = async (cardId) => {
  submitLoading.value = true;

  try {
    const response = await setDefaultBankCard(cardId);

    if (response.code === 0) {
      ElMessage.success('默认银行卡设置成功');

      // 刷新银行卡列表
      fetchBankCards();
    }
  } catch (error) {
    console.error('设置默认银行卡失败:', error);
    ElMessage.error('设置默认银行卡失败，请重试');
  } finally {
    submitLoading.value = false;
  }
};

// 删除银行卡
const deleteCard = async (cardId) => {
  submitLoading.value = true;

  try {
    const response = await deleteBankCard(cardId);

    if (response.code === 0) {
      ElMessage.success('银行卡删除成功');

      // 刷新银行卡列表
      fetchBankCards();
    }
  } catch (error) {
    console.error('删除银行卡失败:', error);
    ElMessage.error('删除银行卡失败，请重试');
  } finally {
    submitLoading.value = false;
  }
};

// 显示银行卡详情
const showCardDetail = async (card) => {
  try {
    // 调用后端接口获取银行卡完整详情
    const response = await getBankCardDetail(card.id);
    if (response.code === 0) {
      currentCard.value = response.data;
      cardDetailVisible.value = true;
    } else {
      ElMessage.error(response.message || '获取银行卡详情失败');
    }
  } catch (error) {
    console.error('获取银行卡详情失败:', error);
    ElMessage.error('获取银行卡详情失败，请重试');
  }
};

// 密文手机号
const maskPhoneNumber = (phone) => {
  if (!phone) return '暂无数据';
  
  // 显示前3位和后4位，中间用*代替
  return phone.substr(0, 3) + '****' + phone.substr(phone.length - 4);
};

// 格式化日期
const formatDate = (dateStr) => {
  if (!dateStr) return '暂无数据';
  
  const date = new Date(dateStr);
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, '0');
  const day = String(date.getDate()).padStart(2, '0');
  
  return `${year}-${month}-${day}`;
};

// 判断交易类型是否为收入
const isIncome = (transaction) => {
  // 充值和退款是收入
  return transaction.tradeType === 1 || transaction.tradeType === 5;
};

// 获取交易类型对应的标签类型
const getTradeTypeTagType = (tradeType) => {
  const typeMap = {
    1: 'success', // 充值
    2: 'warning', // 提现
    3: 'info',    // 转账
    4: 'danger',  // 支付
    5: 'success'  // 退款
  };

  return typeMap[tradeType] || 'info';
};

// 获取交易状态对应的标签类型
const getStatusTagType = (status) => {
  const statusMap = {
    0: 'info',    // 处理中
    1: 'success', // 成功
    2: 'danger'   // 失败
  };

  return statusMap[status] || 'info';
};

// 处理分页大小变化
const handleSizeChange = (val) => {
  pageSize.value = val;
  currentPage.value = 1;
  loadTransactions();
};

// 处理当前页码变化
const handleCurrentChange = (val) => {
  currentPage.value = val;
  loadTransactions();
};
</script>

<style scoped>
.accounts-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card-header h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: #303133;
}

.refresh-section {
  display: flex;
  align-items: center;
  gap: 10px;
}

.update-time {
  font-size: 14px;
  color: #909399;
}

.account-overview {
  display: flex;
  gap: 20px;
}

.balance-section {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.total-balance {
  background: linear-gradient(135deg, #1e3c72, #2a5298);
  color: #fff;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.balance-label {
  font-size: 14px;
  opacity: 0.8;
  margin-bottom: 5px;
}

.balance-value {
  font-size: 28px;
  font-weight: 700;
}

.balance-details {
  display: flex;
  gap: 10px;
}

.detail-item {
  flex: 1;
  background-color: #f5f7fa;
  border-radius: 8px;
  padding: 15px;
}

.detail-label {
  font-size: 14px;
  color: #909399;
  margin-bottom: 5px;
}

.detail-value {
  font-size: 18px;
  font-weight: 600;
  color: #303133;
}

.balance-actions {
  display: flex;
  gap: 10px;
}

.balance-chart {
  flex: 1;
  min-height: 280px;
}

.chart-wrapper {
  width: 100%;
  height: 280px;
}

.bank-card-section {
  margin-top: 20px;
}

.bank-cards-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
  margin-top: 10px;
}

.bank-card-item {
  background: linear-gradient(135deg, #e0e0e0, #f5f5f5);
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  position: relative;
  transition: transform 0.3s, box-shadow 0.3s;
  overflow: hidden;
  border: none;
}

.bank-card-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.bank-card-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200' width='200' height='200' opacity='0.1'%3E%3Cpath fill='%23FFFFFF' d='M0 0h200v200H0z'/%3E%3Cpath fill='%23FFFFFF' d='M20 20c10 0 10 10 20 10s10-10 20-10 10 10 20 10 10-10 20-10 10 10 20 10 10-10 20-10 10 10 20 10 10-10 20-10 10 10 20 10 10-10 20-10v20c-10 0-10 10-20 10s-10-10-20-10-10 10-20 10-10-10-20-10-10 10-20 10-10-10-20-10-10 10-20 10-10-10-20-10-10 10-20 10-10-10-20-10v-20zM0 40c10 0 10 10 20 10s10-10 20-10 10 10 20 10 10-10 20-10 10 10 20 10 10-10 20-10 10 10 20 10 10-10 20-10 10 10 20 10 10-10 20-10v20c-10 0-10 10-20 10s-10-10-20-10-10 10-20 10-10-10-20-10-10 10-20 10-10-10-20-10-10 10-20 10-10-10-20-10-10 10-20 10-10-10-20-10V40z'/%3E%3C/svg%3E");
  background-size: 50%;
  opacity: 0.05;
  pointer-events: none;
}

.default-card {
  background: linear-gradient(135deg, #1a5fb4, #3584e4);
  border: none;
  box-shadow: 0 6px 20px rgba(24, 144, 255, 0.25);
  position: relative;
  overflow: hidden;
}

.default-card::after {
  content: '';
  position: absolute;
  top: -25px;
  right: -25px;
  width: 50px;
  height: 50px;
  background-color: rgba(255, 255, 255, 0.15);
  transform: rotate(45deg);
  z-index: 1;
}

.default-card .bank-name {
  position: relative;
}

.default-card .bank-name::after {
  content: '★'; /* Unicode star character */
  position: absolute;
  right: -20px;
  top: 0;
  color: rgba(255, 255, 255, 0.8);
  font-size: 12px;
}

/* 各银行卡样式 - 优化后的配色方案 */
.icbc-card {
  background: linear-gradient(135deg, #c1272d, #ed1c24);
  color: white;
}

.abc-card {
  background: linear-gradient(135deg, #009944, #39b54a);
  color: white;
}

.boc-card {
  background: linear-gradient(135deg, #9e1f24, #cf2529);
  color: white;
}

.ccb-card {
  background: linear-gradient(135deg, #003f8f, #0066b3);
  color: white;
}

.cmb-card {
  background: linear-gradient(135deg, #ce0e2d, #e83a42);
  color: white;
}

.bocom-card {
  background: linear-gradient(135deg, #002f87, #0052d9);
  color: white;
}

.spdb-card {
  background: linear-gradient(135deg, #0a3d98, #265dc6);
  color: white;
}

.cmbc-card {
  background: linear-gradient(135deg, #003980, #0057b8);
  color: white;
}

.citic-card {
  background: linear-gradient(135deg, #b50e0a, #d92e29);
  color: white;
}

.cib-card {
  background: linear-gradient(135deg, #004b91, #0073d4);
  color: white;
}

.ceb-card {
  background: linear-gradient(135deg, #e55600, #ff7e2a);
  color: white;
}

.pab-card {
  background: linear-gradient(135deg, #e64312, #fa6a38);
  color: white;
}

.psbc-card {
  background: linear-gradient(135deg, #006633, #00914a);
  color: white;
}

.default-bank-card {
  background: linear-gradient(135deg, #2c3e50, #34495e);
  color: white;
}

.card-bank-info {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 15px;
  position: relative;
}

.bank-logo {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.2);
  padding: 3px;
}

.bank-name {
  font-weight: 600;
  flex: 1;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-size: 15px;
}

.card-number {
  font-size: 18px;
  letter-spacing: 2px;
  margin: 15px 0;
  font-family: 'Courier New', monospace;
  position: relative;
  padding: 5px 0;
}

.card-number::before {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 40px;
  height: 2px;
  background-color: rgba(255, 255, 255, 0.5);
}

.card-holder {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  font-size: 14px;
}

.card-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 12px;
  opacity: 0.9;
}

.card-actions .el-button {
  background-color: rgba(255, 255, 255, 0.15);
  border: none;
  color: white;
  font-size: 12px;
  padding: 4px 12px;
  border-radius: 4px;
  transition: all 0.3s;
}

.card-actions .el-button:hover {
  background-color: rgba(255, 255, 255, 0.25);
  transform: translateY(-2px);
}

.delete-btn {
  color: rgba(255, 255, 255, 0.9) !important;
}

.delete-btn:hover {
  color: white !important;
}

.transactions-section {
  margin-top: 20px;
}

.transaction-filters {
  display: flex;
  gap: 10px;
}

.pagination-container {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

.income {
  color: #67c23a;
  font-weight: 600;
}

.expense {
  color: #f56c6c;
  font-weight: 600;
}

.transaction-detail {
  padding: 10px;
}

.transaction-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
}

.transaction-type {
  font-size: 16px;
}

.transaction-amount {
  font-size: 24px;
  font-weight: 700;
}

.detail-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.detail-label {
  color: #909399;
  font-size: 14px;
}

.detail-value {
  color: #303133;
  font-size: 14px;
  font-weight: 500;
}

/* 银行卡详情样式 - 改进版 */
.card-detail-content {
  padding: 0;
  background-color: #fff;
}

/* 银行卡预览部分 */
.card-preview {
  padding: 20px;
  border-radius: 12px;
  margin-bottom: 20px;
  position: relative;
  overflow: hidden;
  color: white;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.preview-header {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.bank-logo-large {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.2);
  padding: 4px;
  margin-right: 15px;
}

.bank-name-large {
  font-size: 18px;
  font-weight: 600;
  flex: 1;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.card-tag {
  margin-left: 10px;
}

.card-number-preview {
  font-size: 20px;
  letter-spacing: 2px;
  margin: 15px 0;
  font-family: 'Courier New', monospace;
}

.card-holder-preview {
  font-size: 14px;
  opacity: 0.9;
}

/* 银行卡详细信息部分 */
.card-detail-body {
  padding: 20px;
  background-color: #f9f9f9;
  border-radius: 8px;
  margin-bottom: 20px;
}

.card-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.detail-grid-item {
  display: flex;
  flex-direction: column;
}

.detail-grid-item .detail-label {
  font-size: 13px;
  color: #606266;
  margin-bottom: 5px;
  font-weight: 500;
}

.detail-grid-item .detail-value {
  font-size: 15px;
  color: #303133;
  font-weight: 500;
}

.card-number-full {
  font-family: 'Courier New', monospace;
  letter-spacing: 1px;
}

.card-detail-actions {
  display: flex;
  justify-content: flex-end;
  gap: 15px;
  margin-top: 10px;
}

@media (max-width: 768px) {
  .account-overview {
    flex-direction: column;
  }

  .balance-details {
    flex-direction: column;
  }

  .transaction-filters {
    flex-direction: column;
  }

  .bank-cards-list {
    grid-template-columns: 1fr;
  }
  
  .card-detail-grid {
    grid-template-columns: 1fr;
  }
}
</style>
